<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es6 类的静态方法</title>
  <!-- 
  在 JavaScript ES6 中，类的静态方法是指直接在类本身上定义的方法，而不是在类的实例上定义。这些方法通常用于执行与类本身相关的操作，而不是与类的实例相关。
  1. 定义静态方法
  静态方法使用  `static`  关键字定义。这些方法不能通过类的实例调用，而是通过类名直接调用。
   1.1 示例代码
  class MathUtil {
      // 静态方法
      static add(a, b) {
          return a + b;
      }

      static multiply(a, b) {
          return a * b;
      }
  }

  // 调用静态方法
  console.log(MathUtil.add(5, 3));       // 输出: 8
  console.log(MathUtil.multiply(5, 3));  // 输出: 15
  2. 静态方法的特点
  - 不依赖于实例：静态方法不需要实例化类就可以调用，适用于那些不依赖于实例状态的方法。
  - 访问类的静态属性：静态方法可以访问类的静态属性，但不能访问实例属性。
  - 用于工厂方法：静态方法常用于创建类的实例，称为工厂方法。

  3. 静态属性（ES2022）
  从 ES2022 开始，类还支持静态属性的定义。静态属性与静态方法类似，使用  `static`  关键字定义。
   3.1 示例代码
  class Config {
      static appName = 'My Application';
      static version = '1.0.0';
  }

  // 访问静态属性
  console.log(Config.appName);  // 输出: My Application
  console.log(Config.version);   // 输出: 1.0.0
  4. 优缺点
  - 优点：
    - 组织性：将与类本身相关的功能集中在一起，增强代码的可读性和可维护性。
    - 简化调用：静态方法可以直接通过类名调用，避免了实例化的开销。

  - 缺点：
    - 无法访问实例属性：静态方法无法访问实例属性，因此在需要使用实例数据时不适用。

  5. 总结
  ES6 中的静态方法提供了一种方便的方式来定义与类本身相关的功能，而不需要实例化类。通过使用静态方法，开发者可以更好地组织代码，并实现一些类级别的操作。理解静态方法的用法对于编写清晰和高效的 JavaScript 代码非常重要。
   -->
</head>
<body>

  <script>

    // 1. 构造函数实例方法
    // function Person() {}
    // Person.prototype.sayHello = function () {
    //   console.log('Hello');
    // };
    // // 类方法
    // Person.sayGoodbye = function () {
    //   console.log('Goodbye');
    // }
    // var person = new Person();
    // person.sayHello();  // 输出: Hello
    // Person.sayGoodbye();  // 输出: Goodbye

    // 2. ES6-class静态方法
    class MathUtil {
      constructor(name) {
        this.name = name;
      }
      // 实例方法
      running() {
        console.log(this.name, 'running');
      }

      // 静态方法
      static add(a, b) {
          return a + b;
      }

      static multiply(a, b) {
          return a * b;
      }
    }

    const mathUtil = new MathUtil('mathUtil');
    mathUtil.running();  // 输出: running

    // 调用静态方法
    console.log(MathUtil.add(5, 3));       // 输出: 8
    console.log(MathUtil.multiply(5, 3));  // 输出: 15

    
  </script>
  
</body>
</html>